<template>
	<div id="app">
		<div id="contain">
			<Row>
				<Col :xl="{span:18}">
				<img src="../../assets/bg/bg0.jpg" class="bg" />
				</Col>
				<Col :md="{span:6}">
				<div id="body">
					<h1>用户登录</h1>
					<Form ref="formInline" :model="inputs_data" :rules="ruleInline" :label-width="40">
						<FormItem prop="user">
							<Input type="text" v-model="inputs_data.phone" placeholder="Phone">
							<Icon type="ios-person-outline" slot="prepend"></Icon>
							</Input>
						</FormItem>
						<FormItem prop="password">
							<Input type="password" v-model="inputs_data.password" placeholder="Password">
							<Icon type="ios-lock-outline" slot="prepend"></Icon>
							</Input>
						</FormItem>
					</Form>
				</div>
				<div id="tool"><Button type="text" @click="topasswd">忘记密码？</Button>|<Button type="text" @click="tologup">注册</Button></div>

				<div id="enter">
					<Button style="width: 50%;" type="success" long size="large" @click="login">
						登 录
					</Button>
				</div>

				</Col>

			</Row>
			<div class="foot">
				<p>Copyright (c) 2020-2022 版权所有:信息1701 1710650105 金月</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		props: {
			// msg: String
		},
		data: function() {
			return {
				roles:["系统管理员","农场主","仓库管理员","人事","市场调查分析员","销售"],
				init_urls:["/manage","/","/panel","/staffIM","/data","/sale"],
				inputs_data: {
					phone: "",
					password: "",
				},
				ruleInline: {
					phone: [{
						required: true,
						message: 'Please fill in the user name',
						trigger: 'blur'
					}, ],
					password: [{
							required: true,
							message: 'Please fill in the password.',
							trigger: 'blur'
						},
						{
							type: 'string',
							min: 6,
							message: 'The password length cannot be less than 6 bits',
							trigger: 'blur'
						}
					]
				}
			}

		},

		mounted() {
			// this.axios.get('http://localhost:8888/api/staff/&')
			//           .then(response=>{this.info=response.data})
		},
		methods: {
			login: function() {
				this.axios({
						url: "/api/user/login",
						method: "post",
						data: this.inputs_data
					}).then(r => {
						var info = r.data
						// console.log(info)
						if (info.success) {
							sessionStorage.setItem("user", JSON.stringify({name:info.name,role:info.role}))
							var index=this.roles.findIndex(value=>value==info.role)
							this.$router.push({path:this.init_urls[index]})
						} else {
							this.$Message.info(info.state)
							this.inputs_data.email = ""
							this.inputs_data.password = ""
						}
					})
					.catch(e => {
						this.$Message.info("error:" + e)
					})
			},
			tologup(){
				this.$router.push({path:"/logup"})
			},
			topasswd(){
				this.$Message.info("功能开发中")
			}
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#app {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		/* border: 1px solid #d7dde4; */
		background: #f5f7f9;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}

	h1 {
		text-align: center;
		padding-bottom: 10px;
		padding-left: 20px;
	}

	#contain {
		width: 1900px;
		height: 980px;
	}

	#tool {
		position: relative;
		float: right;
		top: 30px;
		right: 110px;
	}

	.bg {
		width: 100%;
		object-fit: fill;
	}

	#body {
		width: 370px;
		height: 200px;
		position: relative;
		padding-left: 75px;
		top: 80px;
	}

	#enter {
		width: 500px;
		position: relative;
		/* right: 20px; */
		left: 123px;
		top: 90px;
	}

	.foot {
		height: 6%;
		text-align: center;
		font-family: "arial narrow", "微软雅黑";
		font-size: 15px;
		clear: both;
		border-top: 1px solid;
		background-color: #515a6e;
		color: #F8F8F9;
	}

	.foot p {
		padding-top: 15px;
	}
</style>
